<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=8a2a13f1e4a1214f1c5e0d28a1b53786"></script> 
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
	    <title>位置经纬度 + 驾车规划路线</title>
	    <style type="text/css">
	    html,
	    body,
	    #container {
	      width: 100%;
	      height: 100%;
	    }
	    </style>
	    <style type="text/css">
	        #panel {
	            position: fixed;
	            background-color: white;
	            max-height: 90%;
	            overflow-y: auto;
	            top: 10px;
	            right: 10px;
	            width: 280px;
	        }
	        #panel .amap-call {
	            background-color: #009cf9;
	            border-top-left-radius: 4px;
	   	        border-top-right-radius: 4px;
	        }
	        #panel .amap-lib-driving {
		        border-bottom-left-radius: 4px;
	   	        border-bottom-right-radius: 4px;
	            overflow: hidden;
	        }
	    </style>
	    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
	    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
		<script type="text/javascript" src="js/JavaScript.js"></script>
	    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
	</head>
	<body>
        <div id="container"></div>
	  <div class="info">
	    <div class="input-item">
	      <div class="input-item-prepend">
	        <span class="input-item-text" style="width:10rem;">请输入关键字</span>
	      </div>
	      <input id='input' type="text" value='北京' >
	    </div>
	    <p><span id="input-info"></span></p>
	  </div>
	<div id="container"></div>
	<div id="panel"></div>
	<script type="text/javascript">
	    //基本地图加载
	    var map = new AMap.Map("container", {
	        resizeEnable: true,
	        center: [119.353676, 32.113913],//地图中心点
	        zoom: 14 //地图显示的缩放级别
	    });
	    //构造路线导航类
	    var driving = new AMap.Driving({
	        map: map,
	        panel: "panel"
	    }); 
	    // 根据起终点经纬度规划驾车导航路线
	    driving.search(new AMap.LngLat(119.451317, 32.206343), new AMap.LngLat(119.353676, 32.113913), function(status, result) {
	        // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
	        if (status === 'complete') {
	            log.success('绘制驾车路线完成')
	        } else {
	            log.error('获取驾车数据失败：' + result)
	        }
	    });
	</script>
    <script type="text/javascript">
    //初始化地图对象，加载地图
    var map = new AMap.Map("container", {
        resizeEnable: true,
        zoom: 13
    });
    var m1 = new AMap.Marker({
        map: map,
        draggable:true,
        position: new AMap.LngLat(119.451317, 32.206343)
    });
    var m2 = new AMap.Marker({
        map: map,
        draggable:true,
        position:new AMap.LngLat(119.353676, 32.113913)
    });
    map.setFitView();
    
    var line = new AMap.Polyline({
      	strokeColor:'#80d8ff',
      	isOutline:true,
      	outlineColor:'white'
    });
    line.setMap(map);
    var text = new AMap.Text({
      	text:'',
      	style:{'background-color':'#29b6f6',
				'border-color':'#e1f5fe',
				'font-size':'12px'}
    });
    text.setMap(map)
    function computeDis(){
        var p1 = m1.getPosition();
        var p2 = m2.getPosition();
        var textPos = p1.divideBy(2).add(p2.divideBy(2));
        var distance = Math.round(p1.distance(p2));
        var path = [p1,p2];
        line.setPath(path);
        text.setText('两点相距'+distance+'米')
        text.setPosition(textPos)
    }
    computeDis();
    m1.on('dragging', computeDis)
    m2.on('dragging', computeDis)
</script>
	</body>
	
</html>